<template>
  <div class="managementlable">
    <div class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main" v-for="(lable,id) in lable" :key="id">
      <h3>{{lable.lable_name}}</h3>
      <div>
        <el-tag
          :key="tag"
          effect="dark"
          type="success"
          v-for="tag in lable.lable"
          closable
          :disable-transitions="false"
          @close="handleClose(tag,id)"
          style="margin: 0 10px 10px 0"
        >{{tag}}</el-tag>
        <el-input
          class="input-new-tag"
          v-if="lable.inputshow===1"
          v-model="inputValue"
          size="small"
          @keyup.enter.native="handleInputConfirm(id,lable.lable)"
          @blur="handleInputConfirm(id,lable.lable)"
          style="margin: 0 10px 10px 0"
        ></el-input>
        <el-button style="margin: 0" v-else class="button-new-tag" size="small" @click="showInput(id)">+ 添加新的分类</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'managementlable',
  data () {
    return {
      lable: {},
      changelable: {},
      inputValue: ''
    }
  },
  methods: {
    // 分类标签相关
    handleClose (tag, id) {
      this.lable[id].lable.splice(this.lable[id].lable.indexOf(tag), 1)
      this.change(id)
    },

    showInput (id) {
      console.log(id)
      this.lable[id].inputshow = 1
    },

    handleInputConfirm (id, lable) {
      let inputValue = this.inputValue
      lable.map((item) => {
        if (item === inputValue) {
          this.$message.error('已有该标签')
          inputValue = ''
        }
      })
      if (inputValue) {
        if (!this.lable[id].lable) {
          this.lable[id].lable = []
          this.lable[id].lable.push(inputValue)
        } else this.lable[id].lable.push(inputValue)
        this.change(id)
      }
      this.lable[id].inputshow = 0
      this.inputValue = ''
    },
    async change (id) {
      this.changelable = JSON.stringify(this.lable[id])
      this.changelable = JSON.parse(this.changelable) // 通过JSON.stringify和JSON.parse完成深拷贝
      this.changelable.lable = JSON.stringify(this.changelable.lable)
      const result = await this.$axios.post('/admin/changelable', this.qs.stringify(this.changelable))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('修改成功')
        this.lablelist()
      }
    },
    async lablelist () {
      const result = await this.$axios.post('/admin/lablelist',
        this.qs.stringify({ lable_name: '' }))
      if (result.data.state.type === 'SUCCESS') {
        this.lable = result.data.data
        for (let i = 0; i < this.lable.length; i++) {
          this.lable[i].lable = JSON.parse(this.lable[i].lable)
        }
      }
    }
  },
  created () {
    this.lablelist()
  }
}
</script>

<style scoped>
  .top {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 35px);
    padding: 12px 16px;
    background-color: #fff;
  }
  .main {
    margin-top: 40px;
    padding: 5px 40px 20px 40px;
    background-color: #fff;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
